<template>
  <basic-layout title="取消预约" :showAddBtn="false">
    <div class="body_box">
      <div class="head">
<!--        <div class="picStyle"/>-->
        <div class="picStyle" v-if="paramData.srvitemType == '1'"/>
        <div class="picStyle_liliao" v-if="paramData.srvitemType == '2'"/>
        <div class="picStyle_water" v-if="paramData.srvitemType == '3'"/>
        <div class="picStyle_clean" v-if="paramData.srvitemType == '4'"/>
        <div class="picStyle_laundry" v-if="paramData.srvitemType == '5'"/>
        <div class="picStyle_xiche" v-if="paramData.srvitemType == '6'"/>
        <div class="picStyle_banyun" v-if="paramData.srvitemType == '7'"/>
        <div class="picStyle_lvhua" v-if="paramData.srvitemType == '8'"/>
        <div class="rightContent">
          <div class="firstContent">
            <div class="f">
              <div>
                {{ paramData.propertyName }}
              </div>
            </div>
            <div class="s">
              地址：{{ paramData.propertyAddr }}
            </div>
            <div class="s">
              电话：{{ paramData.phone }}
            </div>
          </div>
          <div class="secondContent">
            <span>{{ paramData.servicePriceLabel }}</span>
          </div>
        </div>
      </div>

      <div class="remark">
        <div class="titleStyle">取消原因</div>
        <div>
          <van-field
            v-model="param.retreatReason"
            rows="3"
            autosize
            type="textarea"
            maxlength="40"
            placeholder="请输入留言"
            show-word-limit
          />
        </div>
      </div>

      <div class="foot">
        <div class="footContent">
          <div class="left">
            <div>
              {{ paramData.serviceDate }}
            </div>
            <div>
              {{ paramData.servicePriceLabel }}
            </div>
          </div>
          <div class="right" v-if="param.retreatReason.length <= 0">
            <button class="buttonDisable">
              确认取消
            </button>
          </div>
          <div class="right" v-else>
            <button class="button" @click="scancelHandle">
              确认取消
            </button>
          </div>
        </div>
      </div>
    </div>
  </basic-layout>
</template>
<script>
import {getPropertyServiceOrderInfo, cancelPropertyOrderByStaff} from "@api/srvAssurance/emplcare/apply/order";
import {calcServiceDate} from "@/plugins/utils/formatTime";


export default {
  name: 'confirmCancelApp',
  props: {},
  components: {},
  data() {
    return {
      param: {
        retreatReason: '',
        srvOrderId: '',
      },
      paramData: {
        propertyName: '',
        propertyAddr: '',
        phone: '',
        servicePriceLabel: '',
        srvOrderId: '',
        serviceDate: '',
        srvitemType: '',
      }
    }
  },
  created() {
  },
  computed: {},
  beforeMount() {
    this.param.srvOrderId = this.$route.query.param.srvOrderId;
    this.initOrderData();
  },
  mounted() {
  },
  methods: {
    initOrderData() {
      getPropertyServiceOrderInfo(this.param.srvOrderId).then(res => {
        if (res.code === 1000 && res.data) {
          this.paramData.propertyName = res.data.saProperty.propertyName || '';
          this.paramData.propertyAddr = res.data.saProperty.propertyAddr || '';
          this.paramData.phone = res.data.saProperty.phone || '';
          this.paramData.servicePriceLabel = res.data.servicePriceLabel || '';
          this.paramData.srvOrderId = res.data.srvOrderId || '';
          this.paramData.serviceDate = calcServiceDate(res.data.serviceBeginDate, res.data.serviceEndDate, '.');
          this.paramData.srvitemType = res.data.srvitemType || '';
        }
      })
    },

    scancelHandle() {
      cancelPropertyOrderByStaff(this.param).then(res => {
        if (res.code === 1000) {
          this.$Notify({type: 'success', message: '取消成功！'});
          this.$router.go(-1);
        } else {
          this.$Notify({type: 'warning', message: res.msg});
        }
      });
    },

  },
}
</script>
<style lang="less" scoped>

.body_box {
  background-color: #f9f9f9;
  height: 100%;


  .head {
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgb(255, 255, 255);
    color: rgb(51, 51, 51);
    height: 100px;
    padding: 10px 0px 10px 10px;

    .picStyle {
      background-image: url('../../../../assets/images/care/hair_cut.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 100px;
      width: 100px;
      background-color: #f9f9f9;
      color: rgb(51, 51, 51);
      border: 1px solid rgb(220, 223, 230);
      border-radius: 6px;
    }

    .picStyle_liliao {
      background-image: url('../../../../assets/images/care/li_liao.jpg');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 100px;
      width: 100px;
      background-color: #f9f9f9;
      color: rgb(51, 51, 51);
      border: 1px solid rgb(220, 223, 230);
      border-radius: 6px;
    }

    .picStyle_water {
      background-image: url('../../../../assets/images/care/water.jpg');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 100px;
      width: 100px;
      background-color: #f9f9f9;
      color: rgb(51, 51, 51);
      border: 1px solid rgb(220, 223, 230);
      border-radius: 6px;
    }


    .picStyle_clean {
      background-image: url('../../../../assets/images/care/cleaning.jpg');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 100px;
      width: 100px;
      background-color: #f9f9f9;
      color: rgb(51, 51, 51);
      border: 1px solid rgb(220, 223, 230);
      border-radius: 6px;
    }


    .picStyle_laundry {
      background-image: url('../../../../assets/images/care/xiyi.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 100px;
      width: 100px;
      background-color: #f9f9f9;
      color: rgb(51, 51, 51);
      border: 1px solid rgb(220, 223, 230);
      border-radius: 6px;
    }


    .picStyle_xiche {
      background-image: url('../../../../assets/images/care/xiche.jpg');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 100px;
      width: 100px;
      background-color: #f9f9f9;
      color: rgb(51, 51, 51);
      border: 1px solid rgb(220, 223, 230);
      border-radius: 6px;
    }


    .picStyle_banyun {
      background-image: url('../../../../assets/images/care/banyun.jpg');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 100px;
      width: 100px;
      background-color: #f9f9f9;
      color: rgb(51, 51, 51);
      border: 1px solid rgb(220, 223, 230);
      border-radius: 6px;
    }

    .picStyle_lvhua {
      background-image: url('../../../../assets/images/care/lvhua.jpg');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 100px;
      width: 100px;
      background-color: #f9f9f9;
      color: rgb(51, 51, 51);
      border: 1px solid rgb(220, 223, 230);
      border-radius: 6px;
    }


    .rightContent {
      width: calc(100% - 90px);
      height: 100px;
      margin-left: 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .firstContent {
        .f {
          height: 25px;
          line-height: 25px;
          display: flex;
          justify-content: space-between;

          div:first-child {
            font-size: 16px;
            font-weight: 600;
          }
        }

        .s {
          display: flex;
          flex-wrap: nowrap;
          font-size: 10px;
          color: #878888;
        }
      }

      .secondContent {
        color: #d7a550;
        font-size: 18px;
      }
    }
  }

  .remark {
    margin: 10px 0px;
    background: #ffffff;

    .titleStyle {
      padding: 10px 14px;
      font-size: 15px;
      color: #333333;
      line-height: 1;
      font-weight: 600;

      &:before {
        content: " ";
        display: inline-block;
        width: 3px;
        height: 16px;
        border-radius: 2px;
        background: #d7a550;
        margin-right: 4px;
        vertical-align: -2px;
      }
    }
  }

  .foot {
    position: absolute;
    width: 100%;
    background: #ffffff;
    padding: 10px 0;
    right: 0px;
    bottom: 0px;
    height: 45px;
    z-index: 1;

    .footContent {
      display: flex;
      height: 100%;
      justify-content: space-between;
      align-items: center;
      margin: 0px 10px;

      .left {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;

        div:first-child {
          font-size: 10px;
        }

        div:last-child {
          color: #d7a550;
          font-size: 18px;
        }
      }

      .right {
        .button {
          color: #ffffff;
          background-color: #d9a553;
          border: 1px solid #d9a553;
          border-radius: 20px;
          height: 45px;
          line-height: 45px;
          width: 120px;
          font-size: 17px;
        }

        .buttonDisable {
          color: #ffffff;
          background-color: #e5e6e5;
          border: 1px solid #e5e6e5;
          border-radius: 20px;
          height: 45px;
          line-height: 45px;
          width: 120px;
          font-size: 17px;
        }
      }
    }
  }

}


</style>
